<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=no">
<title>Add Case</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script
	src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="pushy.js"></script>
<script src="js/mobiscroll.core.js"></script>
<script src="js/mobiscroll.scroller.js" type="text/javascript"></script>

<script src="js/mobiscroll.datetime.js" type="text/javascript"></script>
<script src="js/mobiscroll.select.js" type="text/javascript"></script>


<script src="js/mobiscroll.scroller.android.js" type="text/javascript"></script>
<script src="js/mobiscroll.scroller.android-ics.js"
	type="text/javascript"></script>


<link href="css/mobiscroll.scroller.css" rel="stylesheet"
	type="text/css" />

<link href="css/mobiscroll.scroller.android.css" rel="stylesheet"
	type="text/css" />


<link href="css/mobiscroll.scroller.sense-ui.css" rel="stylesheet"
	type="text/css" />

<link href="css/mobiscroll.animation.css" rel="stylesheet"
	type="text/css" />

<script type="text/javascript" src="modernizr-2.6.2.min.js"></script>

<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="demo.css">

<script type="text/javascript">
	$(function() {
		$('.ui-btn-text').hide();

		$('h1').hide();
		$('#caseDate').click(function() {
			$('#caseDate').mobiscroll().date({
				theme : 'android',
				display : 'bubble',
				mode : 'scroller',
				animate : 'swing'
			});

		});

	});
</script><style>
@font-face {
	font-family: 'SourceSansProSemibold';
	src:
		url('http://t1.dkrt.in/fonts/fonts/SourceSansPro-Semibold-webfont.eot');
	src:
		url('http://t1.dkrt.in/fonts/fonts/SourceSansPro-Semibold-webfont.eot?#iefix')
		format('embedded-opentype'),
		url('http://t1.dkrt.in/fonts/fonts/SourceSansPro-Semibold-webfont.woff')
		format('woff'),
		url('http://t1.dkrt.in/fonts/fonts/SourceSansPro-Semibold-webfont.ttf')
		format('truetype'),
		url('http://t1.dkrt.in/fonts/fonts/SourceSansPro-Semibold-webfont.svg#SourceSansProSemibold')
		format('svg');
	font-weight: normal;
	font-style: normal
}

input[type="button"] {
	font: 400 20px/40px 'SourceSansProSemibold', sans-serif;
	height: 22px;
	padding: 8px 15px;
	text-align: center;
	text-decoration: none;
	background: -webkit-linear-gradient(top, #329C92 0%, #00456E 100%);
	background: -o-linear-gradient(top, #329C92 0%, #00456E 100%);
	background: -ms-linear-gradient(top, #329C92 0%, #00456E 100%);
	background: linear-gradient(to bottom, #329C92 0%, #00456E 100%);
	color: #FFFFFF;
	display: block;
	border: medium none;
	color: #FFFFFF;
	cursor: pointer;
	float: left;
	height: 60px;
	overflow: visible;
	padding: 0 15px;
	text-align: center;
	text-decoration: none !important;
	text-shadow: 1px 1px rgba(0, 0, 0, 0.15);
	transition: all 0.2s ease 0s;
	border-radius: 3px;
}

input[type="text"],input[type="date"],textarea {
	font-family: 'SourceSansProSemibold', sans-serif;
	background: white;
	padding: 15px 15px 15px 30px;
	margin-left: 10%;
	margin-right: 20%;
	margin-bottom: 5px;
	border: 1px solid #ccc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #329C92;
	-webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #329C92;
	box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #329C92;
}

input[type="button"]:hover {
	background: #329C92;
	cursor: pointer;
	text-decoration: none;
	transition-duration: 0s;
	transition-timing-function: ease;
}

#submit {
	margin-left: 10%;
	width: 266px;
}

@media screen and (max-width: 768px) {
	#legal {
		font: 400 30px/40px 'SourceSansProSemibold', sans-serif;
		margin-left: -10%;
	}
	#link {
		margin-top: -0.5%;
		float: left;
		font-size: 2em;
		font-weight: bold;
	}
	input[type="text"],input[type="date"],textarea {
		width: 50%;
		margin-left: 21%;
	}
	#submit {
		margin-left: 36%;
		width: 30%;
		margin-top: 10px;
	}
}

@media screen and (max-width: 360px) {
	#legal {
		font: 400 25px/40px 'SourceSansProSemibold', sans-serif;
		margin-left: -10%;
	}
	#link {
		margin-top: 0%;
		float: left;
		font-size: 1.5em;
		font-weight: bold;
	}
	input[type="text"],input[type="date"],textarea {
		margin-left: 18%;
	}
	#submit {
		margin-left: 19%;
		width: 63%;
		margin-top: 1px;
	}
}
</style>

<script type="text/javascript">
$(document).ready(function(){
	var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
	$('#submit').click(function(){
		var casename=$('#caseName').val();
		var respondent=$('#respondent').val();
		var defendant=$('#defendant').val();
		var date=$('#caseDate').val();
		var note=$('#brief').val();
		
		
		db.transaction(function (tx) {
			  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, name, respondent, defendant, date, note)');
			  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, '+casename+','+respondent+','+defendant+','+date+','+note+')');
			 
			});
		
		db.transaction(function (tx) {
			  tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
			   var len = results.rows.length, i;
			   msg = "<p>Found rows: " + len + "</p>";
			   
			   alert(msg);
			   
			  
	});
	
});
		
	});
	
});

</script>
</head>
<body>
	<nav class="pushy pushy-left">
		<ul>
			<li><a href="index.jsp">Home</a></li>
			<li><a href="addCase.html">Add Case(s)</a></li>
			<li><a href="#">View Case(s)</a></li>
			<li><a href="#">Delete</a></li>
			<li><a href="#">Update</a></li>
			<li><a href="#">Instructions</a></li>

		</ul>
	</nav>

	<!-- Site Overlay -->
	<div class="site-overlay"></div>

	<!-- Your Content -->
	<div id="container">
		<!-- Menu Button -->
		<div class="menu-btn">
			<span id="link">&#9776;</span> <span id="legal">Legal Diary</span>
		</div>

		<input id="caseName" name="caseName" type="text" placeholder="Title" autofocus required />
	    <input id="respondent" name="respondent" type="text" placeholder="Respondent" required />
	    <input id="defendant" name="defendant" type="text" placeholder="Defendant" required />
	    <input id="caseDate" name="date" type="text" placeholder="Case Date" required />
		<textarea id="brief" name="caseBrief" placeholder="Make a brief note" rows="4"></textarea>
		<input type="button" name="submit" id="submit" value="Add Case" />



	</div>



</body>
</html>